<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>确认购买</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .content {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .header {
        background-color: #fff;
        position: relative;
        z-index: 2000;
    }

    .wrapper {
        width: 1200px;
        padding: 0 5px;
        margin: 0 auto;
    }

    .header-cont {
        height: 80px;
        box-sizing: border-box;
    }

    .logo {
        float: left;
        margin: 15px 0 0 0;
    }

    .logo img {
        width: 200px;
        height: 50px;
    }

    .header-right {
        float: right;
        margin: 24px 0 0 0;
        width: 940px;
        height: 40px;
        background: image-set(url("http://localhost:8080/sellticket_war_exploded/forward/img/train.png") 1x, url("http://localhost:8080/sellticket_war_exploded/forward/img/train@2x.png") 2x);
        background-repeat: no-repeat;
        position: relative;
        z-index: 2000;
    }

    .header-search {
        width: 380px;
        float: left;
        margin: 5px 0 5px 90px;
    }

    .header-menu {
        float: right;
        padding-right: 10px;
    }

    .search-bd {
        width: 350px;
        position: relative;
    }

    .search-input {
        width: 100%;
        float: left;
        height: 30px;
        line-height: 20px;
        border: 1px solid #dedede;
        padding: 4px 10px;
        background-color: #fff;
        color: #333;
        outline: none;
        font-size: 14px;
        box-sizing: border-box;
    }

    .search-btn {
        float: left;
        width: 30px;
        color: #FFFFFF;
        height: 30px;
        line-height: 30px;
        background-color: #5696DE;
        border: none;
        text-align: center;
        cursor: pointer;
        outline: none;
    }

    .search-btn img {
        width: 16px;
        height: 16px;
    }

    .header-menu li {
        float: left;
        margin-left: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        position: relative;
        list-style: none;
        color: #3b99fc;
        font-size: 12px;
    }

    .menu-line {
        color: #acd1f9;
    }

    .menu-login a {
        color: #333;
        text-decoration: none;
        background-color: transparent;
        margin-left: 10px;
    }

    .nav-box {
        height: 40px;
        background-color: #3b99fc;
    }

    .nav {
        width: 1190px;
        margin: 0 auto;
        height: 40px;
        position: relative;
        z-index: 1900;
    }

    .nav li {
        list-style: none;
        width: 145px;
        float: left;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
    }

    .active {
        background-color: #2676e3;
        color: #fff;
    }

    h1 {
        font-size: 25px;
        color: #8C570F;
    }

    h2 {
        font-size: 20px;
    }

    .container {
        width: 980px;
        min-height: 620px;
        height: auto;
        margin: 0 auto;
    }

    .t_info {
        margin-top: 10px;
        width: 100%;
        height: auto;
        overflow: hidden;
        border: 1px solid #1678be;
        border-radius: 5px 5px 0 0;
    }

    .lay-hd {
        height: 32px;
        line-height: 32px;
        color: #e5f8ff;
        padding-left: 20px;
        font-size: 14px;
        position: relative;
        background: #278ACB;
    }

    .lay-bd {
        background: #eef1f8;
        padding: 0 10px 0;
        height: 98px;
    }

    .t-tit {
        border-bottom: 1px dashed #999;
        line-height: 32px;
        font-size: 12px;
    }

    .t-tit b {
        font-size: 16px;
        margin-left: 10px;
    }

    .price {
        line-height: 60px;
    }

    .price i {
        color: #fb7403;
        font-size: 20px;
        margin-left: 30px;
    }

    .btn {
        width: 92px;
        background: #FF8000;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        border-radius: 4px;
        float: right;
        text-decoration: none;
        font-size: 12px;
        margin-top: 15px;
    }
</style>

<body>

<div class="content">
    <div class="header">
        <div class="wrapper">
            <div class="header-cont">
                <h1 class="logo">
                    <img src="http://localhost:8080/sellticket_war_exploded/forward/img/title.png" alt="">
                </h1>
                <div class="header-right">
                    <div class="header-search">
                        <div class="search-bd">
                            <input type="text" class="search-input" placeholder="搜索车票、餐饮、常旅客、相关规定">
                        </div>
                        <a href="javascript:;" class="search-btn">
                            <img src="http://localhost:8080/sellticket_war_exploded/forward/img/search.png" alt="">
                        </a>
                    </div>
                    <ul class="header-menu">
                        <li>无障碍</li>
                        <li class="menu-line">|</li>
                        <li>爱心版</li>
                        <li class="menu-line">|</li>
                        <li>English</li>
                        <li class="menu-line">|</li>
                        <li>我的12306</li>
                        <li class="menu-line">|</li>
                        <li class="menu-login">
                            <a href="javascript:;">用户：${resUser.user_name}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav-box">
            <ul class="nav">
                <li>首页</li>
                <li class="active">车票</li>
                <li>团购服务</li>
                <li>会员服务</li>
                <li>站车服务</li>
                <li>商旅服务</li>
                <li>出现指南</li>
                <li>信息查询</li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="t_info">
            <div class="lay-hd">车票信息</div>
            <div class="lay-bd">
                <p class="t-tit">
                    <b style="margin-left: 0;">${ticket.train_date}</b>
                    <b>${ticket.train_no}</b>次
                    <b>${ticket.departure.station_name}</b>站
                    <b style="margin-right: 10px">(${ticket.train_time}开)</b>--
                    <b>${ticket.terminal.station_name}</b>站
                    <b>
                        <c:if test="${type == 'business'}">
                            商务
                        </c:if>
                        <c:if test="${type == 'first'}">
                            一等
                        </c:if>
                        <c:if test="${type == 'second'}">
                            二等
                        </c:if>
                    </b>票
                </p>
                <div class="price">
                    <b id="seat-no"></b>
                    <i id="price">
                        <c:if test="${type == 'business'}">
                            票价：￥${ticket.business_price}
                        </c:if>
                        <c:if test="${type == 'first'}">
                            票价：￥${ticket.first_price}
                        </c:if>
                        <c:if test="${type == 'second'}">
                            票价：￥${ticket.second_price}
                        </c:if>
                    </i>
                    <a href="javascript:void(0)" onclick="buy()" class="btn">确认付款</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var num1 = parseInt(Math.random() * 8)+1;
    var num2 = parseInt(Math.random() * 16)+1;
    var array = ["A","B","C","D","F"];
    var num3 = array[parseInt(Math.random() * 5)];
    var seat = num1+"-"+num2+num3;
    document.getElementById("seat-no").innerText="座位号"+seat;
    //生成订单
    function buy() {
        var vNow = new Date();
        var sNow = "";
        sNow += String(vNow.getMonth()+1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        var order_id = sNow;

        var train_id=${ticket.train_id};
        var user_id=${resUser.user_id};
        var seat_type = "${type}";
        var seat_id = seat;
        var price = document.getElementById("price").innerText;
        var pay_money=price.substring(price.indexOf("￥")+1);
        window.location.href="http://localhost:8080/sellticket_war_exploded/order/addOrder?order_id="+order_id+"&train_id="+train_id+"&user_id="+user_id+"&seat_type="+seat_type+"&seat_id="+seat_id+"&pay_money="+pay_money;
    }
</script>
</body>

</html>
